<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2024.3.16 作业</title>
    <link rel="stylesheet" href="fontawesome/css/fontawesome.min.css">
    <link href="fontawesome/css/brands.css" rel="stylesheet" />
    <link href="fontawesome/css/solid.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/components.css">
    <link rel="stylesheet" href="css/util.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/accordion.js"></script>
</head>
<body>
    <header>
        <span class="f-large">个人简历</span>
        <button class="btn-outline float-right mg-h-5 white">下载</button>
        <button class="btn-outline float-right mg-h-5 white">打印</button>
    </header>
    <main class="container">
        <!-- 侧边栏 -->
        <aside>
            <div class="panel">
                <div class="panel-head bg-blue white">个人信息</div>
                <div class="panel-body">
                    <img class="img mg-center display-block" src="avatar.jpg" alt="头像" width="200px" />
                    <div class="text-center"><a href="https://space.bilibili.com/53456">Warma</a></div>
                    <br>
                    <b>Bilibili UP 主</b><br>
                    <i class="pd-r-5 fa-fw fa-solid fa-school"></i><span>中南大学</span><br>
                    <i class="pd-r-5 fa-fw fa-solid fa-book"></i>临床医学专业<br>
                    <i class="pd-r-5 fa-fw fa-solid fa-graduation-cap"></i>全日制本科<br>
                    <i class="pd-r-5 fa-fw fa-solid fa-house"></i>湖南长沙<br>
                    <i class="pd-r-5 fa-fw fa-solid fa-certificate"></i>人类资格证<br>
                    <i class="pd-r-5 fa-fw fa-solid fa-phone"></i>(123) 456-7890<br>
                </div>
            </div>
            <div class="panel">
                <div class="panel-head">技能描述</div>
                <div class="panel-body">
                    <table class="w-full">
                        <tr>
                            <th class="text-right pd-h-10">绘画</th>
                            <td class="w-70p"><progress class="strip blue w-full" value="0.8"></progress></td>
                        </tr>
                        <tr>
                            <th class="text-right pd-h-10">唱歌</th>
                            <td><progress class="strip green w-full" value="0.76"></progress></td>
                        </tr>
                        <tr>
                            <th class="text-right pd-h-10">剪辑</th>
                            <td><progress class="strip red w-full" value="0.7"></progress></td>
                        </tr>
                        <tr>
                            <th class="text-right pd-h-10">奇思妙想</th>
                            <td><progress class="strip yellow w-full" value="1"></progress></td>
                        </tr>
                    </table>

                </div>
            </div>
            <div class="panel">
                <div class="panel-head bg-green white">联系我</div>
                <div class="panel-body clearfix">
                    <form action="javascript: void">
                        <input type="text" placeholder="邮箱"><br>
                        <input type="text" placeholder="消息"><br>
                        <input type="submit" value="提交" class="btn float-right">
                    </form>
                </div>
            </div>
        </aside>
        <!-- 主内容 -->
        <div>
            <section class="card">
                <h2 class="f-light">Warma是活跃于bilibili的一位多面创作型UP主</h2>
                <p>Warma于2015年12月17日在B站出道，目前活跃于bilibili快乐区。其在2016年2月25日初次以Warma身份出声录制扫雷游戏视频投稿。Warma因其丰富的想象力、可爱的声线和绘画风格、多样的视频形式和新奇不断的视频内容深得观众喜爱，在2020年2月9日10:05:39达到了100w粉丝数，2020年11月21日20:18:17达到了200w粉丝数，2022年1月12日23:54:22达到了300w粉丝数，2023年5月1日15:46:04达到了400w粉丝数。<del>2020年3月8日B站达到了1000关注数。</del>目前粉丝数为446.8万。</p>
                <p>Warma的视频类型广泛，囊括动画与手书、歌唱与配音、游戏实况与解说、杂谈与生活分享等类型，视频各环节内容几乎皆为一人完成，具有强烈的个人风格<del>，当你看了多部Warma视频之后，下面很多内容会自动转换为语音</del>。</p>
            </section>
            <section>
                <div class="accordion">
                    <div class="accordion-item">
                        <div class="accordion-head"><a class="accordion-title">项目经验</a></div>
                        <div class="accordion-body">
                            <table class="table-project-exp">
                                <tr>
                                    <th>项目名称</th>
                                    <td>《实验楼》</td>
                                </tr>
                                <tr>
                                    <th>项目周期</th>
                                    <td>两周</td>
                                </tr>
                                <tr>
                                    <th>参数人数</th>
                                    <td>1</td>
                                </tr>
                                <tr>
                                    <th>项目简介</th>
                                    <td>《实验楼》是一款文字冒险游戏。主角是一名普通的高中生，因为迟到被锁在空荡荡的教学楼后遇到了一系列恐怖的事情。游戏中设置了许多选项让玩家可以自由选择，但同时也会面临死亡的危险。</td>
                                </tr>
                                <tr>
                                    <th>个人模块</th>
                                    <td>
                                        <ol>
                                            <li>脚本编写</li>
                                            <li>美术制作</li>
                                            <li>程序开发</li>
                                        </ol>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="accordion-item accordion-folded">
                        <div class="accordion-head"><a class="accordion-title">代表作</a></div>
                        <div class="accordion-body">
                            <table class="table-strip w-full">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>作品</th>
                                        <th>角色</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <th>1</th>
                                        <td title="你也要过饭？">2020 拜年祭单品《诸神的奥运》</td>
                                        <td>参演</td>
                                    </tr>
                                    <tr>
                                        <th>2</th>
                                        <td>音乐 《我家里有蜘蛛！！！》</td>
                                        <td>演唱</td>
                                    </tr>                                
                                    <tr>
                                        <th>3</th>
                                        <td>2024 拜年纪单品《八珍玉食》</td>
                                        <td>演唱</td>
                                    </tr>                                
                                    <tr>
                                        <th>4</th>
                                        <td>虚拟歌姬“诗岸”</td>
                                        <td>音源提供者</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="accordion-item accordion-folded">
                        <div class="accordion-head"><a class="accordion-title">系列视频</a></div>
                        <div class="accordion-body">
                            <ul>
                                <li>沃玛的生活系列</li>
                                <li>爆炸电台系列</li>
                                <li>大画家系列</li>
                                <li>小剧场系列</li>
                                <li>音乐作品</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </main>
    <footer>
        <div class="text-center"><small class="gray">资料来源：<a href="https://zh.moegirl.org.cn/zh-hans/Warma">萌百</a></small></div>
    </footer>
</body>
</html>